<template>
    <div class="img-box" :class="['pb' + pb, isScale ? 'img-scale' : '']">
        <div class="img" :style="{ 'background-image': 'url(' + image + ')' }">

        </div>
        <div class="over">
            <div class="v1">
                {{ name ? name : "名字" }} <span>{{ description ? description : "描述描述描述" }}</span>
            </div>
            <div class="v2">{{ details }}
            </div>
        </div>
    </div>
</template>
<style type="text/scss" lang="scss">
.img-box .over {
    background: #555;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 180px;
    padding: 18px;
    width: 100%;
    height: 40%;
    line-height: 30px;
    color: #f0f0f0;
    font-size: 15px;
    opacity: 0;
    filter: alpha(opacity=0);
}

.img-box:hover .over {
    cursor: pointer;
    border-bottom: 1px solid #555;
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 0.5s ease-in-out;
}
</style>
<script>
import { formatImageSrc } from "@/utils/utils";

export default {
    name: "e-img-box",
    data() {
        return {
            name: "名字",
            details: "详情详情详情详情详情详情",
            description: "描述描述描述",
        }
    },
    props: {
        pb: {
            type: [String, Number],
            default: 100
        },
        src: [String],
        isScale: {
            type: Boolean,
            default: false
        }
    },
    watch: {},
    computed: {
        image() {
            var src = this.src;
            if (src == '') {
                return '';
            }
            var a = src.split(',');
            return formatImageSrc(a[0]);
        }
    },
    methods: {},
    created() {

    },
    mounted() {
    },
    destroyed() {
    }
}
</script>